<%--
  Created by IntelliJ IDEA.
  User: qh
  Date: 2020/8/12
  Time: 17:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"  %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1972937_d4sp43xib8w.css">
    <link rel="stylesheet" href="/static/css/reset.css">
    <%--layui css--%>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        #xc-content{
            width: 100%;
        }

        #xc-content .xc-list-wrapper{
            margin-top: 40px;
        }
        #xc-content .xc-list-wrapper .xc-list-item{
            width: 80%;
            margin: 0 auto;
            background-color: rgba(178, 178, 178, 0.1);
        }
        #xc-content .xc-list-wrapper .xc-list-item .title-wrapper{
            font-size: 30px;
            font-weight: 700;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-bottom: 10px;
        }
        #xc-content .xc-list-wrapper .xc-list-item .detail-wrapper{
            font-size: 16px;
            height: 80px;
            width: 700px;
            margin: 0 auto 10px;

        }
        #xc-content .xc-list-wrapper .xc-list-item .buyPoint-wrapper{
            font-size: 16px;
            height: 80px;
            width: 700px;
            margin: 0 auto;
        }
        #xc-content .xc-list-wrapper .xc-list-item .price-wrapper{
            font-size: 20px;
            height: 30px;
            width: 700px;
            margin: 0 auto;
            color: red;
            text-align: right;
        }
        #xc-content .xc-list-wrapper .xc-list-item .price-wrapper .buy-btn{
            border: none;
            outline: none;
            background-color: rgba(255, 0, 0, 1);
            color: white;
        }
        #xc-content .xc-list-wrapper .xc-list-item .price-wrapper .buy-btn:active{
            background-color: rgba(239, 52, 52, 0.5);
        }

    </style>
</head>

<body>
<jsp:include page="/public/danhang.jsp"/>
<jsp:include page="/travel/search/search.jsp"/>

<div id="xc-content">
    <div class="xc-list-wrapper" id="xc-list">
            <div class="xc-list-item">
                <div class="title-wrapper">
                    <p class="title">${detail.title}</p>
                </div>
                <div class="detail-wrapper">
                    <span style="font-weight: 700">详情：</span>${detail.detail}
                </div>
                <div class="buyPoint-wrapper">
                  <span style="font-weight: 700">产品卖点：</span>${detail.buyPoint}
                </div>
                <div class="price-wrapper">
                    ￥${detail.price}
                    <button id="xc-buy-btn" class="buy-btn" >购买门票</button>
                </div>

                <div class="img-wrapper">
                    <img class="titleImg" src="${detail.detailImg}" alt="">
                </div>
            </div>
    </div>
</div>
<%--<jsp:include page="/public/footer.jsp"/>--%>
<%--jquery--%>
<script src="/static/js/jquery.min.js"></script>
<%--layui js--%>
<script src="/static/layui/layui.all.js"></script>

<script>

   $("#xc-buy-btn").on('click',function () {

       layui.use('layer', function () {
           var layer = layui.layer;
           layer.open({
               type: 1,
               content: '购买成功', //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                   area: ['300px', '200px'],
                   btn:['yes','no'],
                   btnAlign: 'c',
                   shade: [0.8, '#393D49'],
                   shadeClose: 'true',
                   anim: 4,
                   success: function(layero){
                   var btn = layero.find('.layui-layer-btn');
                   btn.find('.layui-layer-btn0').attr({
                       href: 'http://localhost:8090/order/AddOrder.jsp'
                       ,target: '_blank'
                   });
                   }
           });
       });
   })
   // layer.msg('hello');
   <%--$("#xc-buy-btn").on('click',function () {--%>
   <%--    &lt;%&ndash;console.log("${detail.title}")&ndash;%&gt;--%>
   <%--    $.ajax({--%>
   <%--        url:"api/order/addOrder",--%>
   <%--        type:"GET",--%>
   <%--        dateType:'json',--%>
   <%--        data:{order_cat:"${detail.title}",order_pic:${detail.price},state:"未支付"},--%>
   <%--        success:function(data){  //当请求成功时运行的函数。--%>
   <%--            console.log("ok")--%>
   <%--            console.log(data)--%>
   <%--            console.log(typeof data)--%>

   <%--        },--%>
   <%--    })--%>
   <%--})--%>

</script>



</body>
</html>
